<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- script 有一个属性type值为module就代表开启模块化了
    此时script里就不能直接使用其他script中的变量了
    如果要使用其他模块里的变量，要遵循两步：1.导出export 2.导入import 
    一、使用export导出指定变量，变量可以有多个，这些变量会被包裹在一个对象中，
    所以再导入这些变量的时候要使用对象的解构来实现-->
    <script type="module" src="index.js"></script>
    <script type="module">
        // import {a, b} from './index.js'
        // console.log(a + b);


        // *是一个通配符，代表导入所有，as是一个关键词，把导入的所有数据赋值给一个变量s
        // import * as s from './index.js'
        // console.log(s);
        // console.log(s.a);
        // console.log(s.b);

        //import 导入通常来说写在文件的顶部,使用as关键词可以重命名，避免命名冲突的问题

        // import {s as q} from './index.js' 
        // console.log(q);


        //默认导出：export default 变量名或方法名，import 变量名 from XXX
        // 默认导出只能是一个，不能有多个
        // 结论：一个模块文件中可以有多个导出export，但是只能有一个默认导出export default。导入的模块的时候默认导入只能是默认导出的数据
        // 使用场景：如果模块文件里导出的内容只有一个，建议使用默认导出，如果有多个就使用导出export
        // 两者的语法：
        // export 声明关键字 变量 = 变量值 import {变量名}
        // export default 变量值 import 变量名 （随意）
        import paa from './index.js'
        console.log(paa);
        

        
    </script>
</body>
</html>

